<template>
  <div>
    <h1>App</h1>
    <!-- http://localhost:8080/index.html#sdsds -->

    <ul>
      <li>
        <!-- <a href="http://localhost:8080#/a/b">Home</a> -->
        <router-link to="/a/jack/b/20#abc"> Home1</router-link>-
        <router-link to="/a/lili/b/30#efg"> Home2</router-link>
      </li>
      <li>
        <router-link to="/c/10"> Shop-10</router-link> -
        <router-link to="/c/20"> Shop-20</router-link>
      </li>
      <li>
        <a href="#/e/f#abc">Order1</a>-
        <a href="#/e/f?name=lucy&age=18">Order2</a>-
        <router-link to="/e/f?name=tom&age=18">Order3</router-link>
      </li>
      <li>
        <router-link to="/a/b/c">not fond</router-link>
      </li>
    </ul>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  watch: {
    $route(a, b) {
      console.log(a, b);
    }
  }
}
</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>